<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<tn-navbar>月卡审核</tn-navbar>
				<tn-input v-model="inputValue" placeholder="请输入编号查询" @change="filterData">
					<template #suffix>
						<view class="tn-ml tn-mr" @click="filterData">
							<tn-icon name="search" color=" tn-gray_bg"></tn-icon>
						</view>
					</template>
				</tn-input>
				<view class="tn-shadow  ">
					<view class="tn-flex tn-mt-sm justify-end tn-pr-sm  tn-pb-sm ">
						<view class="tn-flex tn-blue_text" @click="openEditPopup"><tn-icon name="filter"></tn-icon>筛选</view>
					</view>


				</view>
			</template>

			<view class="    ">
				<view v-for="(item, index) in 2" :key="index" @click="tnParamById('/pages/main/common/detail', JSON.stringify(item))">
					<view class=" tn-gradient-bg__blue-light  tn-shadow-md tn-p-xs tn-m-sm tn-radius">
						<view class="tn-flex justify-between tn-p-xs ">
							<view class="tn-flex  ">
							<tn-icon name="bankcard" size="40"></tn-icon>	<text class="tn-pl-sm tn-text-bold  ">{{'月卡' }}</text>
							</view>

							<view class="tn-flex  ">
								<tn-title class="tn-mr-xs " title="待审核" mode="dot" assist-color="tn-orange" /> <tn-icon name="right" />
							</view>
						</view>
						<view class=" tn-m-xs tn-border-top tn-border-dashed tn-grey-disabled_border"></view>
						<view class="  tn-mt-xs tn-p-sm tn-text-center    ">
							<view class="tn-flex justify-between tn-text-xs tn-pt-sm">
								<view class="">
									<text>停车场:</text>
								</view>
								<view class="">
									<text>恒凯大厦停车场</text>
								</view>
							</view>
							<view class="tn-flex justify-between tn-text-xs tn-pt-sm ">
								<view class="">
									<text>优惠:</text>
								</view>
								<view class="">
									<text>2元/小时</text>
								</view>
							</view>
						</view>
						 

						<view class="  tn-flex justify-around tn-mt-xl tn-mb-xs">
							<tn-button @click="confirmEdit" width="30%" bg-color="tn-red-disabled" text-color="tn-white"><text class="tn-text-bold">驳回</text></tn-button>
							<tn-button @click="confirmEdit" width="30%" bg-color="tn-blue-disabled" text-color="tn-white"><text class="tn-text-bold">同意</text></tn-button>


						</view>


					</view>
				</view>
			</view>
			<template #loadingMoreNoMore> </template>
		</z-paging>

		<tn-popup v-model="isPopupVisible" width="80%" top="230rpx" open-direction="top" :overlay="false" :radius="25">
			<view class="tn-shadow  tn-p-sm  tn-border  tn-border-bottom  tn-border-top tn-gray-disabled_border">
				<tn-form ref="formRef" :model="formData" label-position="top">
					<tn-form-item label="发起时间">
						<view class="tn-flex justify-between">
							<view @click="openPickerDate('startTime')">
								<tn-input style="pointer-events:none" :model-value="formData.startTime" placeholder="请选择发起开始时间"></tn-input>
							</view>-<view @click="openPickerDate('endTime')">
								<tn-input style="pointer-events:none" :model-value="formData.endTime" placeholder="请选择发起结束时间"></tn-input>
							</view>
						</view>
					</tn-form-item>
					<tn-form-item label="发起人" prop="couponType" required>
						<view @click="openPicker('couponType')">
							<tn-input style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择发起人"></tn-input>
						</view>
					</tn-form-item>
					<tn-form-item label="审核状态" prop="couponType" required>
						<view @click="openPicker('couponType')">
							<tn-input style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择审核状态"></tn-input>
						</view>
					</tn-form-item>
					<tn-form-item label="订单编号" prop="couponType" required>
						<view @click="openPicker('couponType')">
							<tn-input style="pointer-events:none" :model-value="pickerDict.label.couponType[formData.couponType]" placeholder="请选择订单编号"></tn-input>
						</view>
					</tn-form-item>
			 
				</tn-form>

				<view class="tn-mt tn-flex justify-evenly  ">
					<tn-button @click="closePopup" text-color="tn-white" bg-color="tn-grey">取消</tn-button>
					<tn-button @click="confirmEdit" text-color="tn-white">确认</tn-button>
				</view>
			</view>


		</tn-popup>
		<!-- 时间选择器 -->
		<tn-date-time-picker v-model:open="openPickerDateVisible" mode="datetime" @confirm="confirmPickerDate" @close="closePickerDate" />
		<!-- 字典选择器 -->
		<tn-picker v-model:open="openPickerVisible" :data="pickerData" @confirm="confirmPicker" @close="closePicker" />
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from "vue";
	import { tnParamById } from "@/utils/tnUtil";
	import { onLoad } from "@dcloudio/uni-app";
	import CfCarParkUtil from '@/cfsheep/api/cfCarPark/park'
	import { parseTime, timeFn } from "@/cfsheep/util";
	import CfPayUtil from "@/cfsheep/api/pay/pay";
	import { COUPON_TYPE } from '@/utils/dict'; // 引入字典
	const formData = ref({
		startTime: null,
		endTime: null,
		couponType: null
	});
	// 下拉筛选- 筛选索引 
	const isPopupVisible = ref(false);
	const selectDate = ref<String[]>([])
	const openEditPopup = (value : any) => {
		isPopupVisible.value = true;
	};

	const closePopup = () => {
		isPopupVisible.value = false;
	};
	const confirmEdit = () => {
		// 确认修改逻辑
		closePopup();
	};


	// 日期时间筛选-选择器key
	const pickerDateKey = ref('');

	// 日期时间控制选择器的可见性
	const openPickerDateVisible = ref(false);

	// 打开日期时间选择器
	const openPickerDate = type => {
		pickerDateKey.value = type;
		openPickerDateVisible.value = true; // 显示选择器
	};

	// 关闭日期时间选择器
	const closePickerDate = () => {
		openPickerDateVisible.value = false; // 隐藏选择器
	};

	// 确认日期时间选择器的选择
	const confirmPickerDate = (value : any) => {
		console.log(pickerDateKey.value)
		console.log(value)
		formData.value[pickerDateKey.value] = value;
		closePickerDate(); // 关闭选择器
	};


	// 字典枚举映射
	const pickerDict = ref({
		dict: {
			couponType: COUPON_TYPE,
		},
		label: {}
	});

	// 选择器key
	const pickerKey = ref('');
	// 选择器数据
	const pickerData = ref([]);

	// 控制选择器的可见性
	const openPickerVisible = ref(false);

	// 打开选择器
	const openPicker = (type : any) => {
		pickerKey.value = type;
		pickerData.value = pickerDict.value.dict[type];
		openPickerVisible.value = true; // 显示选择器
	};

	// 关闭选择器
	const closePicker = () => {
		openPickerVisible.value = false; // 隐藏选择器
	};

	// 确认选择器的选择
	const confirmPicker = value => {
		formData.value[pickerKey.value] = value;
		closePicker(); // 关闭选择器
	};

	// 处理字典数据格式
	const getDictLabel = () => {
		pickerDict.value.label = {};
		for (let key in pickerDict.value.dict) {
			let dict = pickerDict.value.dict[key];
			pickerDict.value.label[key] = dict.reduce((acc, cur) => {
				acc[cur.value] = cur.label;
				return acc;
			}, {});
		}
	};

	//============

	const inputValue = ref("");
	const carParkId = ref(0);
	const numberPlate = ref('');
	const carTypeList = ref([]);
	const paymentAgencyList = ref([]);

	const filterData = (_numberPlate : string) => {
		if (_numberPlate.length >= 4 || _numberPlate === '') {
			numberPlate.value = _numberPlate;
			queryList(1, 10);
		} else {
			dataList.value = [];
			paging.value.complete(dataList.value);
		}
	};
	// z-paging 示例
	const paging = ref(null);
	// 数据列表
	const dataList = ref([ ]);
 

	/**
	* 拉取停车记录
	* @param pageNo
	* @param pageSize
	*/
	const queryList = async (pageNo : number, pageSize : number) => {
		let params = {
			page: pageNo,
			size: pageSize,
			carParkId: carParkId.value,
			numberPlate: numberPlate.value
		};
		if (numberPlate.value === '') {
			delete params.numberPlate;
		}
		const _dataList = await CfCarParkUtil.getCarParkUseLogListByQuery(params);
		if (_dataList.code == 10002) {
			paging.value.complete(_dataList.data);
		 }  
	};

	/**
	* 拉取车辆类型
	*/
	const getCarTypeList = async () => {
		const _carTypeList = await CfCarParkUtil.getCarTypeListByQuery({
			page: 1,
			size: 100
		});
		if (_carTypeList.code == 10002) {
			carTypeList.value = _carTypeList.data;

		} else {
			carTypeList.value = [];
		}
	};

	/**
	* 拉取支付方式
	*/
	const getPaymentAgencyList = async () => {
		const _paymentAgencyList = await CfPayUtil.getPaymentAgencyListByQuery({
			page: 1,
			size: 200
		})
		if (_paymentAgencyList.code == 10002) {
			paymentAgencyList.value = _paymentAgencyList.data;

		} else {
			paymentAgencyList.value = [];
		}
	}

	/**
	* 根据车辆类型key获取名称
	* @param key
	*/
	const getCarTypeName = (key : string) => {
		// @ts-ignore
		const findRes : any = carTypeList.value.find((i) => i.flagKey === key);
		return findRes?.name;
	};
	onMounted(() => { });
	onLoad((params) => {
		getDictLabel();
		getCarTypeList();
		getPaymentAgencyList();
		if (params != undefined) {
			carParkId.value = params.id;
		}
	});
</script>

<style lang="scss" scoped>
 
	.list-item {
		display: flex;
		align-items: center;
		/* 列表项之间的间距 */
		// padding: 10px 0; /* 增加上下内边距以增加高度 */
		// border-bottom: 1px solid rgba(151, 150, 150, 0.3); /* 添加底部边框线 */
		background-color: #fff;
		/* 确保背景颜色与原样式一致 */

		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
		/* 阴影 */
	}

	.parking-name {
		flex: 1;
		/* 使停车场名称占据剩余空间 */
	}

</style>
